<template>
  <div id="app">
    <el-row>
      <el-col :span="1.5">
        <el-upload
          ref="upload"
          class="upload-demo"
          action=""
          :show-file-list="false"
          :file-list="fileList"
          :auto-upload="false"
          :on-change="handleOnChange"
        >
          <el-button size="mini" slot="trigger" type="primary"
            >上传文件</el-button
          >
        </el-upload>
      </el-col>
      <el-col :span="1.5">
        <el-button
          style="margin-left: 10px"
          size="mini"
          type="primary"
          @click="writeExcelFile"
          >导出数据</el-button
        >
      </el-col>
      <el-col :span="1.5">
        <el-input size="mini" v-model="xiangzhen"></el-input>
      </el-col>
      <el-col :span="1.5">
        <el-button size="mini" type="primary" @click="excelSearch"
          >搜索</el-button
        >
      </el-col>
    </el-row>
    <el-form
      :model="queryParams"
      ref="queryForm"
      size="small"
      :inline="true"
      label-width="98px"
    >
      <el-form-item label="编号" prop="code">
        <el-input
          v-model="queryParams.code"
          placeholder="请输入编号"
          clearable
        />
      </el-form-item>
    </el-form>
    <el-table :data="handleList" height="490">
      <!-- <el-table-column label="id" align="center" prop="id" /> -->
      <!-- <el-table-column label="编号" align="center" prop="code" /> -->
      <el-table-column label="乡镇" align="center" prop="乡镇" />
      <el-table-column label="是否能上门" align="center" prop="__EMPTY" />
    </el-table>
  </div>
</template>

<script>
import { read, utils, write } from "xlsx";
export default {
  name: "App",
  data() {
    return {
      xiangzhen: "",
      // 总条数
      total: 0,
      // 客户列表表格数据
      handleList: [],
      //   excel数据
      excelArray: "",
      // 查询参数
      queryParams: {

      },
      //   文件列表
      fileList: [],
      //   文件名称
      fileName: "",
    };
  },
  methods: {
    // 检索
    excelSearch() {
      console.log(this.handleList);
      console.log(this.xiangzhen);
      this.handleList = this.handleList.filter((item) => {
        return item.乡镇 == this.xiangzhen;
      });
    },
    // 文件重置
    fileReset() {
      this.fileList = [];
    },
    // 文件上传
    handleOnChange(file) {
      this.fileReset();
      this.fileList.push(file);
      this.readExcelFile(file.raw);
      this.fileName = file.name;
    },
    // 本地读取excel
    readExcelFile(file) {
      let reader = new FileReader();
      reader.readAsArrayBuffer(file);
      reader.onload = (e) => {
        let data = new Uint8Array(e.target.result);
        let workbook = read(data, { type: "array" });
        let sheetName = workbook.SheetNames[0];
        let worksheet = workbook.Sheets[sheetName];
        this.excelArray = utils.sheet_to_json(worksheet);
        this.handleList = this.excelArray;
        console.log(this.excelArray);
        // console.log(that.total);
      };
    },
    // 下载为excel文件
    writeExcelFile() {
      let worksheet = utils.json_to_sheet(this.handleList);
      let workbook = utils.book_new();
      utils.book_append_sheet(workbook, worksheet, "Sheet1");
      let excelBuffer = write(workbook, {
        bookType: "xlsx",
        type: "array",
      });
      this.saveAsExcelFile(excelBuffer, "错误信息模板.xlsx");
    },
    saveAsExcelFile(buffer, fileName) {
      const data = new Blob([buffer], { type: "application/octet-stream" });
      if (typeof window.navigator.msSaveBlob !== "undefined") {
        window.navigator.msSaveBlob(data, fileName);
      } else {
        const url = window.URL.createObjectURL(data);
        const link = document.createElement("a");
        link.href = url;
        link.download = fileName;
        link.dispatchEvent(new MouseEvent("click"));
        setTimeout(function () {
          window.URL.revokeObjectURL(url);
        }, 1000);
      }
    },
    chunkArray(arr, size) {
      const result = [];
      for (let i = 0; i < arr.length; i += size) {
        result.push(arr.slice(i, i + size));
      }
      return result;
    },
  },
};
</script>

<style>
</style>
